<template>
    <div>
        <div class="background">
            <img :src="imgSrc" width="100%" height="100%" alt=""/>
        </div>
        <div class="front">
            <Row>
                <Col>
                    <Card style="background-color: rgba(255,255,255,0.5);height: 200px">
                        <p slot="title" style="font-weight: bold;font-size: large;color: black">请输入用户名和密码</p>
                        <p v-if="errorCounter!=0">密码错误，您还剩余：{{ 3-errorCounter }}次尝试机会</p>
                        <Input prefix="ios-contact" label="用户名" placeholder="请输入用户名" v-model="user.userName"></Input>
                        <Row>
                            <Input v-bind:type="passwordType" label="密码" placeholder="请输入密码"
                                   v-model="user.userPassword">
                                <Button v-bind:icon="buttonIcon" slot="append" @click="changePasswordType"></Button>
                            </Input>
                        </Row>
                        <br>
                        <Button @click="signUp">注册</Button>
                        <Button @click="signIn" type="primary">登陆</Button>
                        <Button v-if="passwordError" @click="findOutPassword">找回密码</Button>
                    </Card>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
    import globalData from "@/utils/globalData";
    import axios from "axios";

    export default {
        name: "SignIn",
        data() {
            return {
                passwordType: 'password',
                buttonIcon: 'md-eye',
                imgSrc: require('../../assets/background/back.jpg'),
                passwordError: false,
                errorCounter: 0,
                user: {
                    userName: "",
                    userPassword: ""
                }
            }
        },
        methods: {
            changePasswordType() {
                if (this.passwordType === "password") {
                    this.passwordType = 'text'
                    this.buttonIcon = 'md-eye-off'
                } else {
                    this.passwordType = 'password'
                    this.buttonIcon = 'md-eye'
                }
            },
            findOutPassword() {
                let self = this
                if (this.user.userName === "") {
                    this.$Notice.error({
                        title: "请输入用户名"
                    })
                    return
                }
                axios({
                    method: 'get',
                    url: '/user/findPassword/' + this.user.userName
                }).then(function () {
                    self.$Notice.success({
                        title: "邮件已发送至你的邮箱"
                    })
                })
            },
            signUp() {
                this.$router.replace("/SignUp")
            },
            signIn() {
                let self = this
                if (this.user.userName === "") {
                    this.$Notice.error({
                        title: "请输入用户名"
                    })
                    return
                }
                if (this.user.userPassword === "") {
                    this.$Notice.error({
                        title: "请输入密码"
                    })
                    return
                }
                axios({
                    method: 'post',
                    url: "/api/login",
                    data: this.user
                }).then(function (res) {
                    console.log(res.data)
                    if (res.data.token != null) {
                        self.$Notice.success({
                            title: res.data.message
                        })
                        self.errorCounter = 0
                        //获取用户头像放到global中
                        globalData.setUser(res.data.user)
                        globalData.setToken(res.data.token)
                        globalData.setSignIn()
                        console.log(res.data.user)
                        console.log()
                        axios({
                            method: 'get',
                            url: "/file/sig/avatar/" + res.data.user.avatarUUId,
                            responseType: 'blob'
                        }).then(function (res) {
                            globalData.userAvatar = window.URL.createObjectURL(res.data)
                        })
                        self.$router.replace("/T")
                    } else {
                        self.$Notice.error({
                            title: res.data.message
                        })
                        self.passwordError = true
                        self.errorCounter++
                        // 发送post到服务器
                        if (self.errorCounter === 3) {
                            axios({
                                method: 'post',
                                url: '/user/limit/' + self.user.userName
                            })
                            self.$Notice.success({
                                title: "这下你满意了？"
                            })
                        }
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .background {
        width: 100%;
        height: 100%; /**宽高100%是为了图片铺满屏幕 */
        z-index: -1;
        position: absolute;
    }

    .front {
        z-index: 1;
        top: 300px;
        left: 67%;
        width: 300px;
        position: absolute;
    }
</style>